<template>
  <jax-desc title="模型扩展" class="schema">
    <el-button type="primary" icon="plus" @click="handleEdit()" style="margin-bottom: 12px">新增</el-button>
    <el-table :data="modelValue" style="width: 100%" border>
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="JSON">
              <span>{{ props.row.jsonStr }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="rank" label="排序" width="75px"></el-table-column>
      <el-table-column prop="label" label="标签" width="200px"></el-table-column>
      <el-table-column label="字段">
        <template #default="scope">
          {{ scope.row.name }}
          <template v-if="scope.row.alias">({{ scope.row.alias }})</template>
        </template>
      </el-table-column>
      <el-table-column prop="dataType" label="数据类型" width="150px"></el-table-column>
      <el-table-column label="必填">
        <template #default="scope">
          <el-switch
            :before-change="
              () => handleUpdate(scope.row, { required: scope.row.required ? false : true }, '确认修改吗')
            "
            :active-value="true"
            :inactive-value="false"
            v-model="scope.row.required"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button link type="primary" icon="edit" @click="handleEdit(scope.row, scope.$index)"
            >编辑</el-button
          >
          <el-button link type="primary" icon="delete" @click="modelValue.splice(scope.$index, 1)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </jax-desc>

  <SchemaEdit v-model="editDialog.show" v-model:data="editDialog.data" @submit="handleSubmit" />
</template>
<script setup>
import SchemaEdit from './SchemaEdit.vue'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: Array },
})

const editDialog = reactive({
  show: false,
  data: {},
})

const handleSubmit = data => {
  if (editDialog.index === undefined) {
    props.modelValue.push(data)
  } else {
    props.modelValue[editDialog.index] = data
  }

  props.modelValue = props.modelValue.sort((a, b) => {
    return a.rank - (b.rank || 9999999)
  })

  emits('update:modelValue', props.modelValue)
}

// 显示编辑
const handleEdit = (item = {}, index) => {
  editDialog.show = true
  editDialog.index = index
  editDialog.data = {
    rank: props.modelValue.length + 1,
    dataType: 'text',
    ...item,
  }
}

// 修改
const handleUpdate = (item, newItem, confirmMsg) => {
  return new Promise((resolve, reject) => {
    for (const key in newItem) {
      item[key] = newItem[key]
    }

    item.jsonStr = getJsonStr(item)

    resolve()
  })
}
</script>
<style lang="scss" scoped></style>
